//
// HomeView.js
//

import React, { Component } from 'react'
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableHighlight,
} from 'react-native'

import MyNoticeListView from '../Notice/NoticeListView'
import {__aspect,__screenWidth,__navigator} from '../Common/Utls/Utls'

export default class  HomeView  extends  Component {
  constructor(props) {
    super(props)

    // !
    __navigator.push = this.props.navigation.navigate;

    this.data = [{
      title:'在孵/注册企业',
      subTitle:'200/500家',
      image:require('../Resources/icon0_在孵注册企业.png'),
    },{
      title:'人才企业',
      subTitle:'30家',
      image:require('../Resources/icon0_人才企业.png'),
    },{
      title:'高新企业',
      subTitle:'300家',
      image:require('../Resources/icon0_高新企业.png'),
    },{
      title:'软件企业',
      subTitle:'200家',
      image:require('../Resources/icon0_软件企业.png'),
    },{
      title:'总销售额',
      subTitle:'9000万元',
      image:require('../Resources/icon0_总销售额.png'),
    },{
      title:'纳税',
      subTitle:'1000万元',
      image:require('../Resources/icon0_纳税.png'),
    }]
  };

  _headerBannerSection() {
    let _title = '江宁科技载体地图'

    return (
      <View key='headerBannerSection'
        style={{backgroundColor:'#0bc0cd',height:__aspect(170)}}>
          <View style={{flexGrow:1,justifyContent:'center'}}>
            <Text style={styles.title}>{_title}</Text>
          </View>
        <View key='search' style={{height:42,flexDirection:'row'}}>
          <View style={styles.searchField}></View>
        </View>
        <View key='desc'>
          <View style={styles.count_row}>
            <Text style={styles.count}>载体数：230家</Text>
            <Text style={styles.count}>总面积：2300㎡</Text>
          </View>
        </View>
      </View>
    )
  };

  _iconsBannerSection() {
    let data = this.data;

    function icons() {
       let views = []
       for (item of data) {
         views.push(
           <TouchableHighlight key={item.title} onPress={()=>{
             __navigator.push('NoticeDetailView')
           }}>
           <View style={{width:(__screenWidth/2),height:__aspect(60),backgroundColor:'white'}}>
             <View style={{flexDirection:'row',flexGrow:1,marginLeft:20}}>
                 <Image source={item.image} style={{alignSelf:'center'}}/>
                 <View style={{alignSelf:'center',marginLeft:6}}>
                   <Text style={{fontSize:14,color:'#444444'}}>{item.title}</Text>
                   <Text style={{fontSize:11,color:'grey'}}>{item.subTitle}</Text>
                 </View>
             </View>
           </View>
           </TouchableHighlight>
         )
       }
       return views
     };

    return (
      <View key='iconsBannerSection' style={{backgroundColor:'white',justifyContent:'center'}}>
        <View style={{flexDirection:'row',flexWrap:'wrap'}}>
          {icons()}
        </View>
        <View key='h-line-0' style={styles.h_line}/>
        <View key='h-line-1' style={[styles.h_line,{top:__aspect(120)}]}/>
        <View key='v-line' style={styles.v_line}/>
      </View>
    )
  };

  _myNoticeListSection() {
    return (
      <View style={{flexGrow:1,backgroundColor:'white'}}>
          <View style={{height:15,backgroundColor:'#e9e9ee'}}/>
          <View key='section' style={{flexDirection:'row',height:40}}>
            <Image source={require('../Resources/icon1_我的通知.png')} style={{alignSelf:'center',marginLeft:10}}/>
            <Text style={{color:'#0DC2CA',alignSelf:'center',marginLeft:4,marginTop:-3,fontSize:14}}>我的通知</Text>
            <View style={{flexGrow:1}}/>
            <View style={{alignSelf:'center',flexDirection:'row',marginRight:10}}>
              <Text style={{color:'#808080',fontSize:11,marginRight:4}}>查看更多</Text>
              <Image source={require('../Resources/icon1_rightBack.png')}/>
            </View>
          </View>
          <View key="h-line" style={{backgroundColor:'#e0e0e0',height:0.5,flexGrow:1}}/>
          <MyNoticeListView style={{flexGrow:1}}/>
      </View>
    )
  }

  render() {
    return (
      <View style={{flexGrow:1}}>
          {this._headerBannerSection()}
          {this._iconsBannerSection()}
          {this._myNoticeListSection()}
      </View>
    )
  }
};

const styles = StyleSheet.create({
  title: {
    color:'white',
    alignSelf:'center',
    fontSize:22,
    marginTop:20,
    fontWeight:'bold',
  },
  count: {
    color:'white',
    flexGrow:1,
    textAlign:'center',
    fontSize:11,
    marginTop:9,
  },
  count_row: {
    height:40,
    flexDirection:'row',
    flexGrow:1,
    marginLeft:34,
    marginRight:34,
  },
  searchField:{
    flexGrow:1,
    backgroundColor:'white',
    borderRadius:9,
    marginLeft:34,
    marginRight:34,
    borderColor:'#0ab1be',
    borderWidth:1,
  },
  h_line: {
    position:'absolute',
    width:(__screenWidth),
    top:__aspect(60),
    height:0.5,
    backgroundColor:'#e0e0e0',
  },
  v_line: {
    position:'absolute',
    width:0.5,
    height:((__aspect(60))*3),
    backgroundColor:'#e0e0e0',
    left:(__screenWidth/2),
  }
});
